<template>
  <div class="departments">
    <el-card class="mycard">
      <!-- tabs 结构 -->
      <el-tabs>
        <el-tab-pane label="组织结构"></el-tab-pane>
      </el-tabs>
      <!-- 结构架构 -->
      <div class="box">
        <!-- 结构头部 -->
        <treetools
          :istop="true"
          :item="headLIst"
          @changeAdd="openAdd"
        ></treetools>
        <hr />
        <el-tree :data="list" default-expand-all>
          <treetools
            @refash="getDepartments"
            slot-scope="{ data }"
            :item="data"
            @changeAdd="openAdd"
            @changeEidtAdd="openEdit"
          ></treetools>
        </el-tree>
      </div>
      <addpanel
        ref="addpanel"
        :showadd.sync="showadd"
        :currentObj="currentObj"
        @updateList="getDepartments"
      ></addpanel>
    </el-card>
  </div>
</template>

<script>
import { getDepartmentsApi } from '@/api/departments.js'
import { turnData } from '@/utils/index.js'
export default {
  data () {
    return {
      // 数据源
      list: [],
      active: 'first',
      headLIst: {},
      showadd: false,
      currentObj: {}
    }
  },
  methods: {
    //编辑窗口
    openEdit (item) {
      this.showadd = true
      this.currentObj = item
      this.$refs.addpanel.getheadId(item.id)
    },
    //新增窗口
    openAdd (item) {
      this.showadd = true
      this.currentObj = item
    },
    async getDepartments () {
      const res = await getDepartmentsApi()
      console.log(res)
      this.list = turnData(res.data.depts, '')
      this.headLIst = { ...res.data.depts[0], manager: '负责人' }
    }
  },
  created () {
    this.getDepartments()
  },
  components: {
    treetools: () => import('./components/tree-tools.vue'),
    addpanel: () => import('./components/add-panel.vue')
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin: 20px;
  .mycard {
    padding: 20px;
  }
  .box {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
